<!--
 * @Description: 
 * @Author: shizhe
 * @Date: 2022-03-29 15:10:44
 * @LastEditTime: 2022-07-01 16:03:18
 * @LastEditors: shizhe
 * @Reference: 
-->
<template>
  <div id="com_square">
    <h1>评价信息</h1>
    <div class="score">
      <label>
        <span class="label">综合评分:</span>
        <span class="label_value" style="color: #fa7355">{{ infoData.comprehensiveScore || '--' }}</span>
      </label>
      <label>
        <span class="label">招标阶段评分:</span>
        <span class="label_value">{{ infoData.biddingScore || '--' }}</span>
      </label>
      <label>
        <span class="label">合同阶段评分:</span>
        <span class="label_value">{{ infoData.contractScore || '--' }}</span>
      </label>
      <label>
        <span class="label">验收阶段评分:</span>
        <span class="label_value">{{ infoData.checkScore || '--' }}</span>
      </label>
    </div>
    <div class="score_tag">
      <span
        class="label"
        :style="{ paddingTop: infoData.enterpriseLabel && infoData.enterpriseLabel.length ? '5px' : '0' }"
      >
        供应商标签:</span
      >
      <div v-if="infoData.enterpriseLabel && infoData.enterpriseLabel.length" class="tag_box">
        <div class="tag_value" v-for="(item, index) in infoData.enterpriseLabel" :key="index">
          {{ item.labelNme }}({{ item.labelSum }})
        </div>
      </div>
      <span v-else>暂无标签</span>
    </div>
    <div class="fil_nav">
      <el-radio-group v-model="radio" @change="radioChange">
        <el-radio :label="0">全部</el-radio>
        <el-radio :label="1">好评({{ infoData.goodCount || 0 }})</el-radio>
        <el-radio :label="2">中评({{ infoData.midCount || 0 }})</el-radio>
        <el-radio :label="3">差评({{ infoData.bddCount || 0 }})</el-radio>
      </el-radio-group>
      <div>
        <el-checkbox v-model="checked" @change="radioChange">有评价内容</el-checkbox>
        <el-select v-model="value" style="margin-left: 20px; width: 180px" size="small" @change="radioChange">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </div>
    </div>
    <div v-for="(item, index) in scoreList" :key="index" class="score_item">
      <supplier-score :scoreData="item" :nodes="'score_item_' + index"></supplier-score>
    </div>
    <div class="nocontent_bg" v-show="!total">
      <el-image :src="require('@/assets/role_bg2.png')"></el-image>
      <p style="color: #999999">暂无评价信息</p>
    </div>
    <div class="pag_box" v-show="total">
      <element-pagination
        :Total="total"
        @getData="getPagChange"
        :Page="page"
        :Size="5"
        :Layout="'total,  prev, pager, next, jumper'"
      ></element-pagination>
    </div>
  </div>
</template>

<script>
import ElementPagination from '../../../components/ElementPagination.vue'
import supplierScore from '../components/supplierScore.vue'
export default {
  components: { supplierScore, ElementPagination },
  props: {
    id: {
      type: [String, Number]
    },
    name: {
      type: String
    }
  },
  data() {
    return {
      page: 1,
      size: 5,
      total: 0,
      radio: 0,
      value: 0,
      checked: false,
      options: [
        { label: '全部阶段评分', value: 0 },
        { label: '招标阶段评分', value: 1 },
        { label: '合同阶段评分', value: 2 },
        { label: '验收阶段评分', value: 3 }
      ],
      scoreList: [],
      infoData: {}
    }
  },
  watch: {
    id() {
      this.getData()
      this.getDetail()
    }
  },
  mounted() {
    this.getData()
    this.getDetail()
  },
  methods: {
    radioChange() {
      this.page = 1
      this.getData()
    },
    // 子组件触发分页时触发
    getPagChange(data) {
      this.page = data.currentPage
      this.size = data.pagesize
      this.getData()
    },
    getDetail() {
      this.$https({
        method: 'post',
        url: '/evaluate/titleOfHomePage?enterpriseId=' + this.id
      })
        .then(res => {
          if (res.code == 0) {
            this.infoData = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    getData() {
      this.$https({
        method: 'post',
        url: '/evaluate/evaluateOfHomePage',
        data: {
          page: this.page,
          size: this.size,
          content: this.checked ? 1 : 0,
          enterpriseId: this.id,
          level: this.radio,
          stage: this.value
        }
      })
        .then(res => {
          if (res.code == 0) {
            this.scoreList = []
            this.total = res.data.total
            if (!res.data.records.length) {
              this.scoreList = []
              return
            }
            res.data.records.forEach(item => {
              let obj = {
                enterpriseContent: item.enterpriseContent,
                enterpriseName: this.name,
                labelVos: item.labelVos,
                createTime: item.createTime,
                scoreList: [],
                evaluateType: item.evaluateType
              }
              if (item.evaluateType == 1) {
                obj.scoreList = [
                  { label: '履约能力:', value: item.starOne },
                  { label: '报价合理性:', value: item.starTwo },
                  { label: '招标配合度:', value: item.starThree },
                  { label: '企业信誉:', value: item.starFour },
                  { label: '报价真实性:', value: item.starFive }
                ]
              } else if (item.evaluateType == 2) {
                obj.scoreList = [
                  { label: '服务态度:', value: item.starOne },
                  { label: '产品质量:', value: item.starTwo },
                  { label: '企业信誉:', value: item.starThree },
                  { label: '履约能力:', value: item.starFour },
                  { label: '项目配合度:', value: item.starFive }
                ]
              } else {
                obj.scoreList = [
                  { label: '送货态度:', value: item.starOne },
                  { label: '产品质量:', value: item.starTwo },
                  { label: '供货周期:', value: item.starThree },
                  { label: '服务态度:', value: item.starFour },
                  { label: '履约能力:', value: item.starFive }
                ]
              }
              this.scoreList.push(obj)
            })
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="less" scoped>
#com_square {
  padding: 20px 20px 0;
  border: 1px solid #d6d6d6;
  border-top: none;
  // height: 1247px;
  // overflow-y: auto;
  h1 {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    padding-left: 10px;
    border-left: 4px solid #fa7355;
    span {
      font-weight: normal;
      color: #999;
    }
  }
  .label {
    color: #333;
    margin-right: 10px;
  }
  .score {
    margin: 20px 0;
    label {
      margin-right: 20px;
      font-size: 14px;
    }

    .label_value {
      color: #999;
      font-size: 18px;
      font-weight: bold;
    }
  }
  .score_tag {
    font-size: 14px;
    margin-bottom: 10px;
    display: flex;
    .label {
      display: inline-block;
      width: 76px;
    }
    .tag_box {
      display: flex;
      flex-wrap: wrap;
      width: calc((100% - 86px));
    }
    .tag_value {
      display: inline-block;
      background: #fff4f2;
      // width: 110px;
      padding: 0 15px;
      border: 1px solid #fa7355;
      height: 30px;
      margin-right: 20px;
      margin-bottom: 20px;
      line-height: 30px;
      font-size: 14px;
      text-align: center;
      color: #fa7355;
    }
  }
  .fil_nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ebebeb;
    height: 50px;
    padding: 0 20px;
  }
  .score_item {
    margin-top: 20px;
    padding: 30px;
    border: 1px solid #dbdbdb;
  }
  .pag_box {
    padding-bottom: 20px;
    padding-top: 40px;
    /deep/ .el-pagination {
      margin-top: 0;
      color: #333;
    }
  }
  .nocontent_bg {
    height: 228px;
  }
}
</style>
